<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>09_网格布局-区域选择</title>
        <style>
            .container {
                width: 400px;
                height: 400px;
                background-color: #ccc;

                display: grid;

                grid-template-rows: repeat(4,100px);
                grid-template-columns: repeat(4,100px);
            }

            .item {
                font-size: 2rem;
                background-color: tomato;
            }

            /* .item01 {
                grid-area: 起始行 / 起始列 / 结束行 / 结束列 
                background-color: aqua;
                /* grid-area: 1 / 1 / 3 / 3;
                /* grid-area: span 1 / span 3; 
            }*/


            /* header */
            .item01 {
                background-color: red;
                grid-area: 1 / 1 / 2 / 5;
            }

            /* content-left */
            .item02 {
                background-color: blue;
                grid-area: 2 / 1 / 4 / 2;
            }

            /* content-main */
            .item03 {
                background-color: yellow;
                grid-area: 2 / 2 / 4 / 4;
            }

            /* content-rigth */
            .item04 {
                background-color: green;
                grid-area: 2 / 4 / 4 / 5; 
            }

            /* footer */
            .item05 {
                background-color: aqua;
                grid-area:4 / 1 / 5 / 5;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item item01">1</div>
            <div class="item item02">2</div>
            <div class="item item03">3</div>
            <div class="item item04">4</div>
            <div class="item item05">5</div>
        </div>
    </body>
</html>